<template>
  <div class="standard">
    <div class="standard-header">
      <div class="standard-header--side" />
      <div class="standard-header--text">
        可领取点数：{{ recordInfo.userLeaveNum }}
      </div>
      <div class="standard-header--side" />
    </div>
    <div
      v-if="recordInfo.list && recordInfo.list.length > 0"
      class="standard-content"
    >
      <div
        class="standard-item"
        :class="{ unstadard: item.timeStatus == 0 }"
        v-for="item in recordInfo.list"
        :key="item.id"
      >
        <img class="standard-item--img" src="../../assets/standard-gift.png" />
        <div class="standard-item--content">
          <div class="standard-item--title">
            {{ getItemTitle(item) }}
          </div>
          <div class="standard-item--subtitle">{{ item.month }}</div>
        </div>
        <div class="standard-item--btn" @click="onClickStandard(item)">
          {{ getItemBtnText(item) }}
        </div>
      </div>
    </div>
    <div v-else-if="!isLoading" class="standard-empty">
      <img class="standard-empty__img" src="../../assets/standard-empty.png" />
      <div class="standard-empty__text">
        {{ isAcivityNotOpen ? '活动暂未开始～' : '去其他地方逛逛吧～' }}
      </div>
    </div>
    <div v-else-if="isLoading" class="load-page">
      <van-loading type="spinner" />
    </div>
    <van-popup round v-model:show="isQuotaEmptyPopupVisible">
      <div class="quota-empty-popup">
        <div class="quota-empty-popup__title">本月名额已抢完</div>
        <div class="quota-empty-popup__content">
          新一期名额将在次月10日零点开发，敬请期待！
        </div>
        <div class="quota-empty-popup__btn" @click="onConfrimQuotaEmpty">
          确定
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { Toast } from 'vant'
import { useRouter } from 'vue-router'
import api from '@/api'

export default {
  setup() {
    // const list = [
    //   {
    //     id: 1,
    //     month: '2020年01月',
    //     timeStatus: 0,
    //     useStatus: 0
    //   },
    //   {
    //     id: 2,
    //     month: '2020年02月',
    //     timeStatus: 1,
    //     useStatus: 0
    //   },
    //   {
    //     id: 3,
    //     month: '2020年03月',
    //     timeStatus: 1,
    //     useStatus: 1
    //   }
    // ]
    const list = []

    const router = useRouter()
    const recordInfo = reactive({
      orderLeaveNum: 0,
      userLeaveNum: 0,
      userOrderNum: 0,
      list: list
    })
    const isLoading = ref(true)
    const isAcivityNotOpen = ref(false)
    const isQuotaEmptyPopupVisible = ref(false)

    const getItemTitle = item => {
      if (item.timeStatus == 0) return '未开始'
      if (item.useStatus == 1) return '已兑换'

      return '已达标'
    }

    const getItemBtnText = item => {
      if (item.timeStatus == 0) return '未开始'
      if (item.useStatus == 1) return '查看兑换纪录'
      if (recordInfo.orderLeaveNum == 0) return '停止兑换'
      if (recordInfo.userOrderNum >= 6) return '已达上限'

      return '去兑换'
    }

    const getRecardInfo = async () => {
      isLoading.value = true
      const res = await api.getRecordList()
      isLoading.value = false
      if (res.error) {
        Toast(res.error.message)
        return
      }
      recordInfo.orderLeaveNum = res.data.orderLeaveNum
      recordInfo.userLeaveNum = res.data.userLeaveNum
      recordInfo.userOrderNum = res.data.userOrderNum
      recordInfo.list = res.data.list
    }

    const onClickStandard = item => {
      if (item.timeStatus == 0) {
        Toast('未开始')
        return
      }
      if (item.useStatus == 1) {
        router.push({ path: '/order' })
        return
      }
      if (recordInfo.orderLeaveNum == 0) {
        isQuotaEmptyPopupVisible.value = true
        return
      }
      if (recordInfo.userOrderNum >= 6) {
        Toast('已达上限')
        return
      }

      router.push({ path: '/product', query: { recordId: item.id } })
    }

    const onConfrimQuotaEmpty = () => {
      isQuotaEmptyPopupVisible.value = false
    }

    onMounted(() => {
      getRecardInfo()
    })

    return {
      isLoading,
      isAcivityNotOpen,
      recordInfo,
      isQuotaEmptyPopupVisible,
      getItemTitle,
      getItemBtnText,
      onClickStandard,
      onConfrimQuotaEmpty
    }
  }
}
</script>

<style lang="less">
.standard {
  .standard-header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    .standard-header--side {
      width: 61px;
      height: 1px;
      border-top: 1px dashed #333333;
    }
    .standard-header--text {
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #333333;
      margin: 0 6px;
    }
  }
  .standard-content {
    padding-bottom: 18px;
    .standard-item {
      width: 375px;
      height: 60px;
      border-bottom: 1px solid #f1f1f1;
      display: flex;
      .standard-item--img {
        width: 40px;
        height: 40px;
        margin: 10px 0 0 35px;
      }
      .standard-item--content {
        margin-top: 12px;
        margin-left: 16px;
        flex: 1;
        .standard-item--title {
          font-size: 16px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #333333;
        }
        .standard-item--subtitle {
          font-size: 11px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #666666;

          margin-top: 5px;
        }
      }
      .standard-item--btn {
        width: 94px;
        height: 32px;

        background-image: url(../../assets/standard-item-btn.png);
        background-size: 100% 100%;
        margin-right: 33px;

        display: flex;
        align-items: center;
        justify-content: center;

        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #fff390;

        margin-top: 15px;
      }
    }
    .unstadard {
      opacity: 0.5;
    }
  }
  .standard-empty {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .standard-empty__img {
      margin-top: 80px;
      width: 300px;
      height: 190px;
    }
    .standard-empty__text {
      margin-top: 27px;
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #999999;
    }
    .standard-empty__text_bottom {
      text-align: center;
      margin-top: 16px;
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #999999;
    }
  }
  .quota-empty-popup {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 345px;
    height: 182px;
    .quota-empty-popup__title {
      margin-top: 20px;
      font-size: 20px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #333333;
    }
    .quota-empty-popup__content {
      font-size: 12px;
      margin-top: 24px;
    }
    .quota-empty-popup__btn {
      margin-top: 39px;
      width: 270px;
      height: 41px;
      border-radius: 22px;
      background: linear-gradient(-4deg, #ebd9c0, #efb26d);
      box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.67),
        0px 1px 0px 0px rgba(255, 255, 255, 0.96);

      font-size: 15px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #333333;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
